<template>
    <div class="default-main">
        <el-row v-loading="state.loading" :gutter="20">
            <el-col class="xs-mb-20" :xs="24" :sm="16">
                <el-form
                    v-if="!state.loading"
                    ref="formRef"
                    @keyup.enter="onSubmit(formRef)"
                    :model="state.form"
                    :rules="state.rules"
                    :label-position="'top'"
                    :key="state.formKey"
                >
                    <el-tabs v-model="state.activeTab" type="border-card">
                        <el-tab-pane class="config-tab-pane" name="base" label="MJ绘画配置">
                            <div class="config-form-item">
                                <FormItem
                                    label="ID"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_id"
                                    placeholder="ID"
                                />
                                <FormItem
                                    label="guildId"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_guild_id"
                                    placeholder="guildId"
                                />
                                <FormItem
                                    label="频道ID"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_channel_id"
                                    placeholder="channelId"
                                />
                                <FormItem
                                    label="sessionId"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_session_id"
                                    placeholder="sessionId"
                                />
                                <FormItem
                                    label="version"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_version"
                                    placeholder="version"
                                />
                                <FormItem
                                    label="授权TOKEN"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_authorization"
                                    placeholder="authorization"
                                />
                                <FormItem
                                    label="applicationId"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_application_id"
                                    placeholder="applicationId"
                                />
                                <FormItem
                                    label="最大超时时间（秒）"
                                    prop="draw_id"
                                    type="number"
                                    v-model="state.form.draw_timeout"
                                    placeholder="最大超时时间（秒）"
                                />
                            </div>
                            <el-button :loading="state.submitLoading" type="primary" @click="onSubmit(formRef)">{{ $t('Save') }}</el-button>
                        </el-tab-pane>
                        <el-tab-pane class="config-tab-pane" name="yjai" label="意间绘画配置">
                            <div class="config-form-item">
                                <FormItem
                                    label="ApiKey"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.yjai_key"
                                    placeholder="ApiKey"
                                />
                                <FormItem
                                    label="ApiSecret"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.yjai_secret"
                                    placeholder="ApiSecret"
                                />
                            </div>
                            <el-button :loading="state.submitLoading" type="primary" @click="onSubmit(formRef)">{{ $t('Save') }}</el-button>
                        </el-tab-pane>
                        <el-tab-pane class="config-tab-pane" name="price" label="绘画价格配置">
                            <div class="config-form-item">
                                <FormItem
                                    label="mj绘画价格"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.draw_price"
                                    placeholder="mj绘画价格"
                                />
                                <FormItem
                                    label="意间绘画价格"
                                    prop="draw_id"
                                    type="string"
                                    v-model="state.form.yjai_price"
                                    placeholder="意间绘画价格"
                                />
                            </div>
                            <el-button :loading="state.submitLoading" type="primary" @click="onSubmit(formRef)">{{ $t('Save') }}</el-button>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { uuid } from '/@/utils/random'
import FormItem from '/@/components/formItem/index.vue'
import { FormInstance } from 'element-plus'
import { index, save } from '/@/api/backend/ai/config'
import { buildValidatorData } from '/@/utils/validate'

const ratioValidator = (rule: any, val: number, callback: Function) => {
    let msg = '请填写 0-100 之间的数字'
    if (val != 0 && !val) {
        return callback(new Error(msg))
    }
    if (val < 0 || val > 100) {
        return callback(new Error(msg))
    }
    return callback()
}

const state = reactive({
    loading: false,
    form: {
        draw_id: '',
        draw_guild_id: '',
        draw_channel_id: '',
        draw_session_id: '',
        draw_version: '',
        draw_authorization: '',
        draw_application_id: '',
        draw_timeout: 0,
        yjai_key: '',
        yjai_secret: '',
        draw_price: 0,
        yjai_price: 0,
    },
    rules: {
        draw_id: [buildValidatorData({ name: 'required', title: 'ID' })],
    },
    formKey: uuid(),
    activeTab: 'base',
    submitLoading: false,
})

const formRef = ref<FormInstance>()

const onSubmit = (formRef?: FormInstance) => {
    if (!formRef) return
    formRef.validate((valid: boolean) => {
        if (valid) {
            state.submitLoading = true
            save(state.form)
                .then((res) => {})
                .finally(() => {
                    state.submitLoading = false
                })
        }
    })
}

index().then((res) => {
    state.form = res.data.data
})

defineOptions({
    name: 'cms/config',
})
</script>

<style scoped lang="scss">
.el-tabs--border-card {
    border: none;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__header) {
    background-color: var(--ba-bg-color);
    border-bottom: none;
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__item.is-active) {
    border: 1px solid transparent;
}
.el-tabs--border-card :deep(.el-tabs__nav-wrap) {
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}
.el-card :deep(.el-card__header) {
    height: 40px;
    padding: 0;
    line-height: 40px;
    border: none;
    padding-left: 20px;
    background-color: var(--ba-bg-color);
}
.config-tab-pane {
    padding: 5px;
}
.config-tab-pane-add {
    width: 80%;
}
</style>
